/**
 * Created by zzy on 2017/7/3.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    Dimensions,
    StyleSheet,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
import {observer} from 'mobx-react/native'
import {observable, action, computed} from 'mobx'
@observer
export default class ClassifyTab extends Component{
    constructor(props){
        super(props);
        this.data=this.props.data;
        this.handler=this.props.handler;
        this.selectIndex=this.props.sortSelectIndex;
    }

    render(){
        return <View style={{flexDirection:'row',backgroundColor:'white',padding:10,marginTop:20}}>
           {
                 this._getTabs(this.data,this.handler)
            }
        </View>
    }
    _getTabs(data,handler){
        var tabs=[];

        for(let i=0;i<data.length;i++){
            tabs.push(<TabCell data={data[i]} key={i} index={i} allIndex={data.length-1} selectIndex={this.selectIndex} onpress={(index)=>{
                handler(index);
                this.selectIndex=index;
            }}/>)
        }
        return tabs;
    }
}
@observer
class TabCell extends Component{
    constructor(props){
        super(props);
    }
    render(){
        let textColor=this.props.selectIndex==this.props.index?'#4DC0FF':'gray';
        return <TouchableOpacity
            style={[classifyTabStyle.center,{flexDirection:'row',flex:1}]}
            onPress={() => {
                //this.props.data.sort==true?this.props.onpress(this.props.index):(null);
                this.props.onpress(this.props.index);
            }}
            >
        <View style={[classifyTabStyle.center,{flexDirection:'row',flex:1}]}>
            <Text style={{color:textColor}}>{this.props.data.title}</Text>
            {
                this.props.data.sort==true?(
                this.props.selectIndex==this.props.index?<View>
                    {
                        this.props.data.sortType==true?<View>
                            <Image style={{resizeMode:'contain',width:10,height:10}} source={require('../../luoasserts/shop/screen_up_s.png')}></Image>
                            <Image style={{resizeMode:'contain',width:10,height:10}} source={require('../../luoasserts/shop/screen_down.png')}></Image>
                        </View>:<View>
                            <Image style={{resizeMode:'contain',width:10,height:10}} source={require('../../luoasserts/shop/screen_up.png')}></Image>
                            <Image style={{resizeMode:'contain',width:10,height:10}} source={require('../../luoasserts/shop/screen_down_s.png')}></Image>
                        </View>
                    }
                </View>:<View>
                    <Image style={{resizeMode:'contain',width:10,height:10}} source={require('../../luoasserts/shop/screen_up.png')}></Image>
                    <Image style={{resizeMode:'contain',width:10,height:10}} source={require('../../luoasserts/shop/screen_down.png')}></Image>
                </View>
                ):(null)
            }
        </View>
            {
                this.props.index==this.props.allIndex?(null):<View style={{width:0.5,height:20,backgroundColor:'gray'}}></View>
            }
        </TouchableOpacity>
    }
}
const classifyTabStyle=({
    center:{
        alignItems:'center',
        justifyContent:'center'
    }
});